/**
 * Ref 转发
 *
 *    1. 函数组件是没有 this 的。如果通过 ref 标记一个函数组件会报错。
 *    2. 函数组件中无法使用 字符串方式的 ref。因为 字符串方式的 ref 后续是要通过 this.refs.xxx 获取到数据的，但函数组件没有this
 *
 *    如果需要通过 ref 标记一个 函数组件，则该函数组件需要通过 React.forwordRef() 做转发。
 *
 * React.forwordRef()
 *    概念： 是一个高阶组件，接受一个组件作为参数，返回一个新组件。
 *    语法：
 *        const NewComponent = React.forwordRef(WrappendComponent)
 *    特点：
 *        1. 被包装的组件（WrappendComponent）会接受到第二个参数叫 ref, 是一个 ref 对象
 *
 *
 *
 * 案例：
 *    App 标记 Hello. Hello 将其标记转发到 Hello 内部的 h4 元素上。
 *
 */

import { useRef, forwardRef, useEffect, useImperativeHandle } from "react";

function Hello(props, myRef) {
  console.log("Hello props", props);
  console.log("Hello ref", myRef);
  return (
    <div>
      <h4 ref={myRef}>Hello</h4>
    </div>
  );
}

// 调用 forwardRef 对 Hello 组件做一个包装
const NewHello = forwardRef(Hello);

function App() {
  const myRef = useRef();
  useEffect(() => {
    console.log("App myRef", myRef); // Hello h4
  }, []);
  return (
    <div>
      <h1>App</h1>

      <hr />
      {/* 
        Function components cannot have string refs. We recommend using useRef() instead

        函数组件中无法使用 字符串方式的 ref。因为 字符串方式的 ref 后续是要通过 this.refs.xxx 获取到数据的，但函数组件没有this
      */}
      {/* <Hello ref="xxx" /> */}

      {/* <Hello ref={myRef} /> */}

      <NewHello ref={myRef} />
    </div>
  );
}

export default App;
